<template>
  <div class="drawer" v-if="visible">
    <div class="drawer-header">
      <span>根据对账单生成明细</span>
      <button class="close" @click="$emit('close')">×</button>
    </div>
    <div class="drawer-body">
      <div class="form-item">
        <label>对账单ID</label>
        <input v-model.number="form.reconciliationId" type="number" placeholder="请输入对账单ID">
      </div>
      <div class="tips">
        <p>说明：系统将根据该对账单的供应商信息，自动查找相关的采购订单、收货单和付款单，并生成对应的对账明细记录。</p>
      </div>
    </div>
    <div class="drawer-footer">
      <button class="btn" @click="$emit('close')">取消</button>
      <button class="btn primary" @click="submit" :disabled="saving">
        {{ saving ? '生成中...' : '生成明细' }}
      </button>
    </div>
  </div>
  <div class="mask" v-if="visible" @click="$emit('close')" />
  
</template>

<script>
import { supplierDetailGenerate } from '@/api/finance/supplierReconciliationDetail'

export default {
  name: 'SupplierReconciliationDetailCreate',
  props: { visible: Boolean },
  data() {
    return {
      form: {
        reconciliationId: null
      },
      saving: false
    }
  },
  methods: {
    async submit() {
      if (!this.form.reconciliationId) {
        alert('请输入对账单ID')
        return
      }
      this.saving = true
      try {
        console.log('开始生成明细，对账单ID:', this.form.reconciliationId)
        const result = await supplierDetailGenerate(this.form.reconciliationId)
        console.log('API响应结果:', result)
        
        // 检查响应结构 - 更宽松的检查
        const responseData = result?.data || result
        const code = responseData?.code
        const msg = responseData?.msg || responseData?.message
        
        if (code === 200 || code === 0) {
          alert('生成成功')
          this.$emit('saved')
          this.$emit('close')
        } else {
          console.error('生成失败，响应:', result)
          alert(msg || '生成失败')
        }
      } catch (error) {
        console.error('生成明细失败:', error)
        // 即使有错误，也检查是否数据已经生成成功
        if (error.message && error.message.includes('生成成功')) {
          alert('生成成功')
          this.$emit('saved')
          this.$emit('close')
        } else {
          alert(error.message || '生成失败')
        }
      } finally {
        this.saving = false
      }
    }
  }
}
</script>

<style scoped>
.drawer { 
  position: fixed; 
  top: 0; 
  right: 0; 
  width: 420px; 
  height: 100%; 
  background: #fff; 
  box-shadow: -2px 0 8px rgba(0,0,0,.1); 
  display: flex; 
  flex-direction: column; 
  z-index: 1000; 
}
.drawer-header { 
  padding: 12px 16px; 
  border-bottom: 1px solid #eee; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-weight: bold;
}
.drawer-body { 
  padding: 16px; 
  flex: 1; 
  overflow: auto; 
}
.drawer-footer { 
  padding: 12px 16px; 
  border-top: 1px solid #eee; 
  text-align: right; 
}
.form-item { 
  margin-bottom: 16px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}
.form-item label { 
  width: 100px; 
  text-align: right; 
  color: #666; 
  font-size: 14px;
}
.form-item input { 
  flex: 1; 
  padding: 8px 12px; 
  border: 1px solid #dcdfe6; 
  border-radius: 4px; 
  font-size: 14px;
  outline: none;
}
.form-item input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.btn { 
  padding: 8px 16px; 
  border: 1px solid #dcdfe6; 
  background: #fff; 
  cursor: pointer; 
  border-radius: 4px; 
  margin-left: 8px;
  font-size: 14px;
}
.btn.primary { 
  background: #409eff; 
  color: #fff; 
  border-color: #409eff; 
}
.btn:hover {
  opacity: 0.9;
}
.close { 
  border: none; 
  background: transparent; 
  cursor: pointer; 
  font-size: 20px; 
  color: #666;
  padding: 4px;
}
.close:hover {
  color: #333;
}
.mask { 
  position: fixed; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(0,0,0,.3); 
  z-index: 999;
}
.tips {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 12px;
  margin-top: 16px;
}
.tips p {
  margin: 0;
  color: #0369a1;
  font-size: 14px;
  line-height: 1.4;
}
</style>


